<template>
	<div class="vue_app integralBuyRecord" style="position: relative;width: 100%;">
		<div>
			<my-header :title="'积分兑换记录'" :hasTitle="true" :hasBack="true"></my-header>
			<!--头部-->
		</div>
		<div class="overhid" :style="`height: ${screenHeight}px`">
			<vertical-scroll ref='verticalScroll' @scrollBottom="loadMore">
				<ul class="aui-list aui-media-list detailed_list" style="background-color: inherit;">
					<li class="integralBuyRecord_item" v-for="(item,index) in recordata">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">单号:{{item.integralOrderNo}}</div>
								<div class="aui-list-item-right"><span class="aui-text-danger">{{orderGoodsType(item.goodsType)}} {{orderTypeStatus(item.logisticsStatus,item.status)}}</span></div>
							</div>
							<div class="aui-list-item-text">{{item.createTm | Time}}</div>
						</div>
						<div class="aui-media-list-item-inner" @click="gotoOrderDetails(item)">
							<div class="aui-list-item-media">
								<img :src="item.integralOrderGoods?item.goodsImg||item.integralOrderGoods.goodsImg||'static/image/demo2.png':item.goodsImg||'static/image/demo2.png'" style="width:4rem;height:4rem" />
							</div>
							<div class="aui-list-item-inner">
								<h3 style="min-height: 2.2rem;"><span style="float: left;">{{item.goodsName}}</span><span style="float: right;font-size: 0.65rem;" v-if="item.goodsType==2">{{item.integralOrderGoods.realPrice}}</span></h3>
								<p style="clear: both;" v-if="item.goodsType==2 && item.integralOrderGoods.goodsSpec">规格：{{item.integralOrderGoods.goodsSpec}}</p>
								<p style="clear: both;" v-if="item.goodsType==0">礼品卡卡号：{{item.giftcardEntityList[0].giftcardEntityCode}}</p>
								<p style="clear: both;"><span style="float: left;">单价：{{item.goodsType==2?'￥'+item.integralOrderGoods.goodsPrice:item.integralPrice+'积分'}}</span><span style="float: right;"><em>x</em>{{item.goodsNum}}</span></p>
							</div>
							<!--<div class="subtotal">
								<span></span>
								<p></p>
							</div>-->
						</div>
						<div class="total_text">
							<span>共{{item.goodsNum}}件商品，共计：{{item.realPay}}积分</span>
						</div>
						<div class="edit_address">
							<div class="aui-btn aui-btn-outlined" v-if="item.goodsType==2" @click="gotoOrderDetails(item)">查看订单</div>
						</div>
					</li>
					<li v-show="recordata.length == 0 && !isOnLoading " class="centent">
						<div class="no_data">
							<img src="static/image/no_order.png">
							<p>暂无相关数据</p>
						</div>
					</li>

					<li v-show="isShowLoadMore" style="color:#9a9a9a ;height:2rem!important;  width: 100%;text-align: center;  line-height: 2rem;vertical-align: middle ; background:white;font-weight: 600">
						<LoadMoreAnimate></LoadMoreAnimate>
						加载更多
					</li>
					<!--<li v-show="isdatano" style="padding: 0.3rem 0 0.5rem;border-top:1px solid rgb(245,245,245);color: rgb(154,154,154)">
						暂无其他兑换信息
					</li>-->
				</ul>
			</vertical-scroll>
		</div>
		<button-to-top @goTop="goTop"></button-to-top>
	</div>
</template>

<script>
	import MyHeader from "../header";
	import axios from "axios";
	import VerticalScroll from '../../real-components/VerticalScroll';
	import ButtonToTop from '../../real-components/ButtonToTopForTest';
	import LoadMoreAnimate from '@/real-components/LoadMoreAnimate';
	import { showLoading, hideLoading } from '@/utils/loading'
	export default {
		data() {
			return {
				recordata: [],
				//分页查询数据
				pageNum: 1,
				length: 8,
				totalCount: 0,
				totalPageCount: 0,
				nextIndex: 0,
				isOnLoading: true,
				isShowLoadMore: false,
				isdatano: false,
			}
		},
		components: {
			"my-header": MyHeader,
			"vertical-scroll": VerticalScroll,
			ButtonToTop,
			LoadMoreAnimate
		},
		methods: {
			//回到顶部
			goTop() {
				this.$refs.verticalScroll.goTop()
			},
			//获取数据请求
			async getrecordata() {
				let params = {
					length: this.length,
					pageNum: this.pageNum,
					start: this.nextIndex,
				};
				let config = {
					url: window.api.trade_host + '/integralOrder/selectIntegralOrderList',
					method: 'post',
					data: params,
					headers: {
						'sessionId': localStorage.getItem('sessionId'),
					},
				};
				await axios(config).then((res) => {
					this.isShowLoadMore = false
					if(res.data.data[0] && res.data.data[0].results && res.data.data[0].results.length > 0) {
						var data = res.data.data[0].results
						this.recordata.push(...data)
						this.totalPageCount = res.data.data[0].totalPageCount
						this.nextIndex = res.data.data[0].nextIndex
						this.totalCount = res.data.data[0].totalCount
						if(this.totalPageCount <= this.pageNum && this.recordata.length > 0 && this.isOnLoading) {
							this.isdatano = true
						}
					}
					if(this.recordata.length == 0) {
						this.isOnLoading = false
					}
				})
			},
			//下拉加载更多
			loadMore() {
				if(!this.isOnLoading || this.totalPageCount <= this.pageNum) {
					return
				} else if(this.totalPageCount > this.pageNum && this.recordata.length > 0) {
					this.isShowLoadMore = true
					this.pageNum++
						this.getrecordata()
				}
			},
			//订单状态
			orderTypeStatus(logisticsStatus, status) {
				if(status === 1) {
					return '已取消';
				} else if(status === 2) {
					return '交易关闭';
				} else if(logisticsStatus === 0) {
					return '待配送'
				} else if(logisticsStatus === 1) {
					return '配送中'
				} else if(logisticsStatus === 2) {
					return '已完成'
				}
			},
			//订单兑换类型
			orderGoodsType(item) {
				if(item == 0) {
					return '礼品卡兑换'
				} else if(item == 1) {
					return '优惠券兑换'
				} else if(item == 2) {
					return ''
				}
			},
			//跳转订单详情页面
			gotoOrderDetails(item) {
				if(item.goodsType == 2) {
					this.$router.push({
						path: 'orderDetails',
						query: {
							shopId: item.parentOrderNo,
							orderStatus: -1
						}
					})
				}
			},
			//显示加载更多
			showLoading() {
				hideLoading()
				showLoading
				setTimeout(() => {
					hideLoading()
				})
			},
		},
		computed: {
			screenHeight() {
				return window.innerHeight - '60';
			}
		},
		filters: {
			Time: function(time) {
				if(time) {
					let date = new Date(time);
					return `${date.getFullYear()}-${(date.getMonth()+ 1)>9 ? (date.getMonth()+ 1) : '0' + (date.getMonth()+1)}-${date.getDate()>9 ? date.getDate() : '0' + date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}:${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}`;
				}
			}
		},
		watch: {

		},
		beforeDestroy() {
			hideLoading()
		},
		mounted() {
			this.getrecordata()
		},
	}
</script>

<style scoped>
	.integralBuyRecord .overhid {
		overflow: hidden;
	}
	
	.integralBuyRecord .edit_address {
		border: none;
	}
	
	.integralBuyRecord_item {
		text-align: left;
		padding-left: 0.75rem;
		background-color: #fff;
	}
	
	.integralBuyRecord .aui-list .aui-list-item-title {
		width: auto;
	}
	.aui-list img{
		max-width: 107% !important
	}
</style>